<template lang="html">
  <section class="component-book_selector">
    <div class="selector_body">
      <form class="" action="index.html" method="post" id="select">
        <div class="selector_content">
          <ul class="content_section" >
            <li v-for="section in seletedSection"
            class="content_item">
              <div class="content_item_detail "
              :class="statusToClass(item.status)"
              v-for="(item,index) in section.section"
              :id="item.id">
                <div v-if="item.status === 0">
                  <div class="change_item">
                    {{item.price}}
                  </div>
                </div>
                <div class="" v-if="item.status === 1" @click="change(item)">
                  <div class="change_item"
                  :class="{'content_item_detail_selected':item.active,'content_item_detail_able': !item.active}"
                  :id="item.id"
                  >
                    {{item.price}}
                  </div>
                </div>
              </div>
            </li>
            <p>已选：{{checkedIds}}</p>
            <p>总价:{{totalPrice}}</p>
          </ul>
        </div>
      </form>
    </div>
    <button type="button" class="confirmBtn" >确认订单（<em>￥</em>{{this.totalPrice}}<em class="price"> RMB</em> ）</button>

  </section>
</template>

<script>
export default {
  props: {
    courts: {
  	  type: Array,
  	  requried: true
	  },
    timeList: {
  	  type: Array,
  	  requried: true
  	},
    seletedSection: {
  	  type: Array,
  	  requried: true
  	}
  },
  data(){
  	return {
      checkedIds: [],
      priceList: [],
      totalPrice: 0
  	}
  },
  methods: {
  	statusToClass(status){
  		switch(status){
  			case 0:
  			return 'content_item_detail_disable'
  			case 1:
  			return 'content_item_detail_able'
        case 2:
        return 'content_item_detail_selected'
  		}
  	},
    change(item){
      if (this.checkedIds.indexOf(item.id) === -1) {
        this.checkedIds.push(item.id)
        this.priceList.push(item.price)
        console.log(this.priceList);
      }else if (this.checkedIds.indexOf(item.id) !== -1) {
        let index = this.checkedIds.indexOf(item.id)
      this.checkedIds.splice(index,1)
      this.priceList.splice(index,1)
      console.log(this.priceList);
      }
      //计算
      let result = 0
      for (var i = 0; i < this.priceList.length; i++) {
        let priceItem = parseInt(this.priceList[i])
        result += priceItem
        console.log(result);

      }
      this.totalPrice = result

      item.active = !item.active
    }
  },
  mounted(){
    for (var i = 0; i < this.seletedSection.length; i++) {
      for (var j = 0; j < this.seletedSection[i].section.length; j++) {
        let itemDetail = this.seletedSection[i].section[j]
        if (itemDetail.status === 0) {
        }else if (itemDetail.status === 1) {
          this.$set(itemDetail,'active',false);
        }
      }
    }
  }
}

</script>

<style lang="scss" scoped>
.component-book_selector{
	width:100%;
	height: 100%;
  .selector_body{
  	height: 100%;
  	width: 100%;
  	overflow: scroll;
  	.selector_content{
  		display: inline-block;
  		margin-left:3px;
  		margin-right:3px;
  		.content_section{
  			.content_item{
  				color: #fff;
  				margin-bottom: 7px;
  				.content_item_detail{
            width: 110px;
    				height: 70px;
    				text-align: center;
            border-radius: 10px;
            display: inline-block;
            margin-right: 7px;
            .change_item{
              width: 100%;
              height: 100%;
              display: block;
              line-height: 70px;
              span{
                color: #fff;
                display: block;
              }
            }
  				}
  			}
  		}
  	}
  }
  .content_item_detail_disable{
    background-image: linear-gradient(0deg, #5e5e5e 0%, #474a43 100%);
  }
  .content_item_detail_able{
    background-image: linear-gradient(0deg, #17c5ae 0%, #2dc294 100%);
    border-radius: 10px;
  }
  .content_item_detail_selected{
    background-image: linear-gradient(0deg, #f67c86 0%, #f6774b 100%);
    border-radius: 10px;
  }
}
.confirmBtn{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background-color: #ff4907;
  font-size: 33px;
  color: #fff;
  font-weight: 100;
  em{
    font-size: 25px;
  }
  .price{
    font-size: 33px;
    font-weight: bold;
  }
  &:active{
    color : #ff505e;
    background-color: #d03902;
  }
}
</style>
